<template>
  <div :class="$style.wrap">
    <ContentWrap>
      <FormContainer :column="4">
        <el-form ref="form" :model="formData" :rules="formRules" label-width="80px">
          <el-form-item prop="prizeCode" label="奖品编码">
            <el-input v-model="formData.prizeCode" clearable placeholder="请输入奖品编码"></el-input>
          </el-form-item>
          <el-form-item prop="prizeName" label="奖品名称">
            <el-input v-model="formData.prizeName" clearable placeholder="请输入奖品名称"></el-input>
          </el-form-item>
          <el-form-item prop="state" label="状态">
            <el-select v-model="formData.state" clearable filterable placeholder="请选择启用状态">
              <el-option value="1" label="启用"></el-option>
              <el-option value="0" label="停用"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <Button type="primary" @click="resetHandle">重置</Button>
            <Button type="primary" enter @click="queryHandle">查询</Button>
          </el-form-item>
        </el-form>
      </FormContainer>
      <div class="button-container">
        <AddEdit text="新增" @refresh="refresh"></AddEdit>
        <AddEdit text="编辑" is-edit :row="selectedArry" @refresh="refresh"></AddEdit>
        <Button type="primary" @click="enableHandle">启用</Button>
        <Button type="primary" @click="disableHandle">停用</Button>
      </div>
      <table-box ref="table" no-request :other-filters="otherFilters" :table-config="tableConfig" @selection-change="selectionChange">
        <el-table-column slot="before" type="selection" width="50" />
      </table-box>
    </ContentWrap>
  </div>
</template>
<script>
import ContentWrap from '@/components/ContentWrap'
import FormContainer from '@/components/FormContainer'
import { filtersRaw } from '@/utils'
import { enable, disable, batDisable, batEnable } from '@/api/luckyDrawGift'
import AddEdit from './components/addEdit'
export default {
  name: 'LuckyDrawGift',
  components: {
    ContentWrap,
    FormContainer,
    AddEdit
  },
  data() {
    return {
      formData: {
        prizeCode: '',
        prizeName: '',
        state: ''
      },
      formRules: {

      },
      tableConfig: {
        interfacePath: '/call-center/api/v1/carePrize/page',
        pageFlag: true,
        hideFuncBar: true,
        sort: 'createTime',
        order: 'desc',
        // 表格字段动态配置
        setting: [
          {
            label: '序号',
            width: 80,
            align: 'center',
            formatData: v => v.keyIndex + 1
          },
          {
            prop: 'prizeCode',
            width: 160,
            label: '奖品编码'
          },
          {
            prop: 'prizeName',
            width: 140,
            label: '奖品名称'
          },
          {
            prop: 'quantity',
            width: 120,
            label: '数量'
          },
          {
            prop: 'state',
            width: 120,
            label: '状态',
            formatData: v => {
              if (v.state === 1 || v.state === '1') {
                return '启用'
              }
              return '停用'
            }
          },
          {
            prop: 'createBy',
            label: '创建人',
            width: 140,
            formatData: v => {
              if (v.createBy) {
                return `${v.createByName}(${v.createBy})`
              }
              return ''
            }
          },
          {
            prop: 'createTime',
            width: 140,
            label: '创建时间'
          },
          {
            prop: 'lastUpdateBy',
            width: 140,
            label: '更新人',
            formatData: v => {
              if (v.lastUpdateBy) {
                return `${v.lastUpdateByName}(${v.lastUpdateBy})`
              }
              return ''
            }
          },
          {
            prop: 'lastUpdateTime',
            width: 140,
            label: '更新时间'
          }
        ]
      },
      selectedArry: [],
      otherFilters: []
    }
  },
  methods: {
    resetHandle() {
      this.$refs.form.resetFields()
    },
    queryHandle() {
      this.$refs.form.validate().then(() => {
        const list = []
        const eq = ['prizeCode', 'state']
        const like = ['prizeName']
        for (const [k, v] of Object.entries(this.formData)) {
          if (v === '' || v === null || v === undefined || (v instanceof Array && v.length <= 0)) {
            continue
          }
          if (eq.includes(k)) {
            list.push(filtersRaw(k, v, '='))
          } else if (like.includes(k)) {
            list.push(filtersRaw(k, v, 'like'))
          }
        }
        this.otherFilters = list
        this.refresh()
      })
    },
    selectionChange(v) {
      this.selectedArry = v
    },
    refresh(type) {
      this.$nextTick(() => {
        this.$refs.table.initTableData(type)
      })
    },
    // 启用
    enableHandle() {
      if (this.selectedArry.length <= 0) {
        this.$message.info('请选择礼品')
        return
      }
      let p
      if (this.selectedArry.length === 1) {
        p = enable(this.selectedArry[0].id)
      } else {
        p = batEnable(this.selectedArry.map(e => e.id))
      }
      return p.then(res => {
        this.$message.success('启用成功！')
        this.refresh()
      })
    },
    // 停用
    disableHandle() {
      if (this.selectedArry.length <= 0) {
        this.$message.info('请选择礼品')
        return
      }
      let p
      if (this.selectedArry.length === 1) {
        p = disable(this.selectedArry[0].id)
      } else {
        p = batDisable(this.selectedArry.map(e => e.id))
      }
      return p.then(res => {
        this.$message.success('停用成功！')
        this.refresh()
      })
    }

  }
}
</script>
<style lang='scss' module>
.wrap{
    & tr{
        background-color: white !important;
    }
}
</style>
